
<template>
  <div class="hearder">
   <div class="header_top">
     <!--<div class="header_left">-->
       <x-icon class="icon_left" type="ios-arrow-back" size="30"></x-icon>
     <!--</div>-->
     <div class="header_center">
       {{header_msg}}
     </div>
   </div>
    <div class="header_bottom">
      <search
        @result-click="resultClick"
        @on-change="getResult"
        :results="results"
        v-model="value"
        placeholder="请输入车牌号/卡号"
        position="absolute"
        auto-scroll-to-top top="0.44rem"
        @on-focus="onFocus"
        @on-cancel="onCancel"
        @on-submit="onSubmit"
        ref="search"></search>
    </div>
    <!--<button @click="mm()">vgfg</button>-->

  </div>
</template>
<script>
  import util from '../libs/util'
  import config from '../libs/api'
  import { Search, Group, Cell, XButton } from 'vux'
  export default {
    data() {
      return {
        header_msg:'卡片管理',
        results: [],
        value: ''
      }
    },
    methods: {
      mm(){
        util.ajax.get(config.murl).then((result) => {
          console.log(result);
        })
      },
      setFocus () {
        this.$refs.search.setFocus()
      },
      resultClick (item) {
        window.alert('you click the result item: ' + JSON.stringify(item))
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? getResult(this.value) : []
      },
      onSubmit () {
        this.$refs.search.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      }
    },
    components: {
      Search
    }
  };
  function getResult (val) {
    let rs = []
    for (let i = 0; i < 20; i++) {
      rs.push({
        title: `${val} result: ${i + 1} `,
        other: i
      })
    }
    return rs
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/scss" lang="scss" scoped>
  .hearder{
    height: 100%;
    background: -moz-linear-gradient(left, #36c5d3 0%, #539ffd 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #36c5d3), color-stop(100%, #539ffd));
    background: -webkit-linear-gradient(left, #36c5d3 0%, #539ffd 100%);
    background: -o-linear-gradient(left, #36c5d3 0%, #539ffd 100%);
    background: -ms-linear-gradient(left, #36c5d3 0%, #539ffd 100%);
    background: linear-gradient(to right, #36c5d3 0%, #539ffd 100%);
  }
  .header_top{
    display: flex;
    height: 0.44rem;
    color: #fff;
    .icon_left{
      height: 0.44rem;
    }
    .vux-x-icon {
      fill: #fff;
    }
  }
  .header_center{
    font-size: 0.17rem;
    line-height: 0.44rem;
    margin: 0 auto;
  }
  .header_bottom{



  }


</style>
